<template>
  <div class="course-detail">

    <nav-bar background="none" class="nav-bar-position"/>

    <header class="header">
      <white-space :status-bar="true"/>
      <white-space :status-bar="true"/>

      <section class="content">
        <div class="title">
          <div class="first">{{ lessonList.desc }}</div>
          <div class="name">{{ lessonList.name }}</div>
        </div>

        <div class="img"
        >
          <my-img
            :src="lessonList.picture"
            class-name="poster"
          />
        </div>

      </section>
    </header>

    <section class="step-list">
      <!--      左侧·金豆状态    -->
      <ul class="beans">
        <li :key="i"
            class="bean"
            v-for="(v,i) in lessonList.lessons"
        >
          <my-img :src="`bean${ v.is_end ? '' : '_gray' }.png`" class-name="bean-img"/>
          <div :style="{background:v.is_end?'#FFCC18':'#DFE3EB'}" class="stack"
               v-if="i < lessonList.lessons.length - 1"></div>
        </li>
      </ul>

      <!--      右侧·金豆状态    -->
      <ul class="step-item">
        <li
          :key="i"
          @tap="_NavigateTo(v,i)"
          class="detail"
          v-for="(v,i) in lessonList.lessons"
        >
          <div
            :class="{'gray-filter':v.is_end === 0}"
            :style="{
            backgroundImage:`url(${imageUrl}/img/${v.img})`,
            }"
            class="detail-wrap"
          >
            <my-img :src="v.c_img" class-name="c-img"/>

            <div class="beans-title">
              <div class="title">{{ v.text }}</div>
              <div>
                <my-img
                  :key="index"
                  class="ico-beans"
                  class-name="ico-beans"
                  src="star_border.png"
                  v-for="(bean,index) in v.count"
                  v-if="v.text !== '练一练'"/>
                <my-img
                  :key="index"
                  class="ico-beans"
                  class-name="ico-beans"
                  src="star_border.png"
                  v-for="(bean,index) in v.progress"
                  v-if="v.text === '练一练'"/>
                <my-img
                  :key="index"
                  class="ico-beans" class-name="ico-beans gray-filter"
                  src="star_border.png"
                  v-for="(bean,index) in v.count - v.progress"
                  v-if="v.text === '练一练'"/>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </section>

    <button
      :send-message-path="`https://build.fangti.com?u_id=${u_id}&id=${id}`"
      :session-from="`https://build.fangti.com?u_id=${u_id}&id=${id}`"
      @click="toShareBuild"
      class="button"
      open-type="contact"
      send-message-img="分享的单个图片链接"
      send-message-title="晒晒成绩单"
      show-message-card="true"
      v-if="lessonList.lessons[lessonList.lessons.length-1].is_end"
    >
      <my-img class-name="share" src="share.png"/>
      <span>晒晒成绩单</span>
    </button>
  </div>
</template>

<script>
  import { imageUrl, soundList } from "../../api/url.config";
  import { NavigateTo } from "../../utils/router";
  import { mapActions, mapState } from 'vuex';
  import { Toast } from "../../utils/modal";

  export default {
    name: "course_detail",
    data() {
      return {
        imageUrl,
        id: -1,
        list: [],
        u_id: '',
        flag: false,
      }
    },
    onLoad(query) {
      const { id } = query;
      this.id = id;
      this.u_id = this.userInfo.u_id;
    },
    onShow() {
      const { id } = this;
      this.reqLessonList({ id });
      this.stopPlay()

    },
    computed: {
      ...mapState('Course', ['lessonList']),
      ...mapState('User', ['userInfo'])
    },
    methods: {
      NavigateTo,
      ...mapActions('Course', ['reqLessonList', 'studyMore5']),
      ...mapActions('Tools', ['setVoicePath', 'playVoice', 'stopPlay']),

      async _NavigateTo(v, i) {
        const { id, setVoicePath, playVoice, flag } = this;

        if (flag) {
          return
        }

        this.flag = true;

        if (i > 0 && this.lessonList.lessons[i - 1].is_end === 0) {
          this.flag = false;
          return Toast({ title: '要完成上一关才能解锁哦' })
        }

        setVoicePath({ voicePath: soundList.click });
        playVoice();

        setTimeout(() => {
          this.NavigateTo({
            url: v.url,
            query: {
              type_id: v.id,
              id,
              progress: parseInt(v.progress)
            }
          });
          this.flag = false
        }, 200)

      },

      toShareBuild() {
        // #ifdef  APP-PLUS
        const { u_id, id } = this;
        this.NavigateTo({
          url: '/pages_course/course_share/course_share',
          query: { u_id, id }
        })
        // #endif
      },
    },
  }
</script>


<style lang="scss">
  @import "../../uni";

  .course-detail {
    @include bg;

    .header {
      z-index: 999;
      position: sticky;
      top: 0;
      width: 100vw;
      background: linear-gradient(309deg, rgba(9, 182, 188, 1) 0%, rgba(0, 224, 180, 1) 100%);
      padding-bottom: upx(40);

      .content {
        height: 100%;
        display: flex;
        align-items: center;

        .title {
          margin-left: upx(40);
          flex: 1;
          @include ft(36, #fff, 500);

          .first {
          }

          .name {
            margin-top: .8em;
          }
        }

        .img {
          $width: 250;
          $border: 10;
          $radius: ($width + $border)/2;
          background: white;
          width: upx($width);
          border-radius: upx($radius) 0 0 upx($radius);
          border: upx($border) solid #fff;
          padding-right: upx(60);

          .poster {
            width: upx(220);
            height: upx(220);
            border-radius: 50%;
            border: upx(12) solid rgba(0, 189, 129, .3);
          }
        }
      }
    }

    .step-list {
      display: flex;
      justify-content: space-between;
      padding:upx(100) upx(62);
      margin-top: upx(40);

      .beans {
        width: upx(56);

        .bean {
          .bean-img {
            width: upx(56);
            height: upx(56);
          }

          .stack {
            width: upx(2);
            height: upx(112);
            background: $theme-yellow;
            margin: upx(16) auto;
          }
        }
      }

      .step-item {
        margin-top: upx(-70);
      }

      .detail {
        width: upx(516);
        height: upx(178);
        margin-top: upx(25);

        &-wrap {
          display: flex;
          padding: upx(12) upx(28);
          box-sizing: border-box;
          height: 100%;
          background: {
            size: 100%;
          };
        }

        .c-img {
          flex-shrink: 0;
          width: upx(120);
          height: upx(120);
        }

        .beans-title {
          @include ft(36, #fff, 500);
          margin: upx(16) 0 0 upx(36);

          .ico-beans {
            width: upx(40);
            height: upx(40);
            margin: upx(24) upx(20) 0 0;

            &:last-child {
              margin-right: 0;
            }
          }
        }


      }
    }

    .button {
      display: flex;
      justify-content: center;
      align-items: center;
      position: fixed;
      bottom: 0;
      width: 100vw;
      height: upx(112);
      background: linear-gradient(136deg, rgba(255, 211, 34, 1) 0%, rgba(255, 186, 0, 1) 100%);
      border-radius: upx(40) 0 0 0;
      border: none;
      outline: none;

      &::after {
        border: none;
      }

      @include ft(36, #fff, 500);

      .share {
        width: upx(44);
        height: upx(44);
        margin-right: upx(16);
      }
    }
  }
</style>
